<template>
  <v-container class="storedetail">
    <v-row class="mt-10">
      <h1 style="font-size: 26px">{{ $t('storedetail') }}</h1>
    </v-row>
    <v-row align="center" class="mb-10">
      <v-col>
        <v-row no-gutters justify="center" class="my-5">
          <div>
            <v-img width="400px" height="300px" alt="store" :src="detail.logo" />
          </div>
        </v-row>
        <!-- <v-row>
          <v-slide-group
              class="pa-4 d-none d-sm-block"
              center-active
          >
            <v-slide-item
                v-for="(n,i) in detail.images"
                :key="i"
            >
              <v-card
                  class="ma-4"
                  width="33%"
              >
                <v-img width="100px" :src="n"></v-img>
              </v-card>
            </v-slide-item>
          </v-slide-group>
        </v-row> -->
      </v-col>
      <v-col>
        <!-- <v-list-item> -->
        <v-row no-gutters align="center">
          <v-col cols="12" sm="3" class="title">
            <v-list-item-content>
              <v-list-item-title>{{ $t('storename') }}</v-list-item-title>
            </v-list-item-content>
          </v-col>
          <v-col cols="12" sm="9" class="clo_666">
            <v-list-item-content>
              <v-list-item-subtitle>{{ detail.name }}</v-list-item-subtitle>
            </v-list-item-content>
          </v-col>
        </v-row>
        <!-- </v-list-item> -->
        <v-divider class="" />
        <!-- <v-list-item > -->
        <v-row no-gutters align="center">
          <v-col cols="12" sm="3" class="title">
            <v-list-item-content>
              <v-list-item-title>{{ $t('storeaddress') }}</v-list-item-title>
            </v-list-item-content>
          </v-col>
          <v-col cols="12" sm="9" class="clo_666">
            <v-list-item-content>
              <v-list-item-subtitle>{{ detail.address }}</v-list-item-subtitle>
            </v-list-item-content>
          </v-col>
        </v-row>
        <!-- </v-list-item> -->
        <v-divider class="" />
        <!-- <v-list-item> -->
        <v-row no-gutters align="center">
          <v-col cols="12" sm="3" class="title">
            <v-list-item-content>
              <v-list-item-title>{{ $t('onlinetime') }}</v-list-item-title>
            </v-list-item-content>
          </v-col>
          <v-col cols="12" sm="9" class="clo_666">
            <v-list-item-content>
              <v-list-item-subtitle
                >{{
                  detail.business_start && detail.business_start.toString().padStart(2, '0')
                }}
                :00 - {{ detail.business_end && detail.business_end.toString().padStart(2, '0') }} :
                00</v-list-item-subtitle
              >
            </v-list-item-content>
          </v-col>
        </v-row>
        <!-- </v-list-item> -->
        <v-divider class="" />
        <!-- <v-list-item> -->
        <v-row no-gutters align="center">
          <v-col cols="12" sm="3" class="title">
            <v-list-item-content>
              <v-list-item-title>{{ $t('contract') }}</v-list-item-title>
            </v-list-item-content>
          </v-col>
          <v-col cols="12" sm="9" class="clo_666">
            <v-list-item-content>
              <v-list-item-subtitle>{{ detail.contacts }}</v-list-item-subtitle>
            </v-list-item-content>
          </v-col>
        </v-row>
        <!-- </v-list-item> -->
        <v-divider class="" />
        <!-- <v-list-item> -->
        <v-row no-gutters align="center">
          <v-col cols="12" sm="3" class="title">
            <v-list-item-content>
              <v-list-item-title>{{ $t('phone') }}</v-list-item-title>
            </v-list-item-content>
          </v-col>
          <v-col cols="12" sm="9" class="clo_666">
            <v-list-item-content>
              <v-list-item-subtitle>{{ detail.phone }}</v-list-item-subtitle>
            </v-list-item-content>
          </v-col>
        </v-row>
        <!-- </v-list-item> -->
        <v-divider class="" />
        <!-- <v-list-item> -->
        <v-row no-gutters align="center">
          <v-col cols="12" sm="3" class="title">
            <v-list-item-content>
              <v-list-item-title>{{ $t('eamil') }}</v-list-item-title>
            </v-list-item-content>
          </v-col>
          <v-col cols="12" sm="9" class="clo_666">
            <v-list-item-content>
              <v-list-item-subtitle>{{ detail.email }}</v-list-item-subtitle>
            </v-list-item-content>
          </v-col>
        </v-row>
        <!-- </v-list-item> -->
        <v-divider class="" />
      </v-col>
    </v-row>
    <v-row no-gutters class="my-10">
      <div v-html="detail.content" />
    </v-row>
    <v-row class="mt-10">
      <h2>{{ $t('storeposition') }}</h2>
    </v-row>
    <v-row class="my-10">
      <iframe
        :src="detail.map_src"
        width="600"
        height="450"
        style="border: 0; width: 100%"
        allowfullscreen=""
        loading="lazy"
        referrerpolicy="no-referrer-when-downgrade"
      />
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: 'StoreDetail',
  props: {
    detail: {
      type: Object,
      required: true
    }
  }
};
</script>
<style scoped lang="scss">
.storedetail {
  padding-left: 80px;
  padding-right: 80px;
}
.title {
  min-width: 120px;
}
@media screen and (max-width: 600px) {
  .storedetail {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}
.clo_666 {
  color: #666;
}
</style>
